<template>
    <div>
      <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
       :append-to-body='true' width="800px">
        <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="100px" >

          <el-row>
            <el-col :span="12">
          <el-form-item label="软件名称：" prop="name" style="width:90%;" >
            <el-input v-model.trim="ruleForm.name"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="识别码值：" prop="code" style="width:90%;" >
            <el-input v-model.trim="ruleForm.code"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="服务状态：" prop="fwlist" style="width:90%;">
            <el-select v-model="ruleForm.fwlist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsfwlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="强制登录：" prop="forcelist" style="width:90%;">
            <el-select v-model="ruleForm.forcelist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsforcelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="试用时间：" prop="try" style="width:90%;">
            <el-input v-model.trim="ruleForm.try"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="单机多开：" prop="overopenlist" style="width:90%;">
            <el-select v-model="ruleForm.overopenlist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsoveropenlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="推广人数：" prop="extend" style="width:90%;">
            <el-input v-model.trim="ruleForm.extend"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="使用人数：" prop="use"  style="width:90%;">
            <el-input v-model.trim="ruleForm.use"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="注册模式：" prop="registerlist"  style="width:90%;">
            <el-select v-model="ruleForm.registerlist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsregisterlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="注册送时：" prop="registertime" style="width:90%;">
            <el-input v-model.trim="ruleForm.registertime"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="绑定模式：" prop="bindinglist" style="width:90%;">
            <el-select v-model="ruleForm.bindinglist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsbindinglist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="解绑扣时：" prop="bindingtime"  style="width:90%;">
            <el-input v-model.trim="ruleForm.bindingtime"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="限次周期：" prop="periodlist"  style="width:90%;">
            <el-select v-model="ruleForm.periodlist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsperiodlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="解绑限次：" prop="bindinglimit" style="width:90%;">
            <el-input v-model.trim="ruleForm.bindinglimit"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="更新方式：" prop="updatemodelist" style="width:90%;">
            <el-select v-model="ruleForm.updatemodelist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionsupdatemodelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="更新地址：" prop="updateaddress" style="width:90%;">
            <el-input v-model.trim="ruleForm.updateaddress"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="版本号值：" prop="version" style="width:90%;">
            <el-input v-model.trim="ruleForm.version"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="软件公告：" prop="bulletin"  style="width:90%;">
            <el-input v-model.trim="ruleForm.bulletin"  /> 
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
          <el-form-item label="静态数据：" prop="static" style="width:90%;">
            <el-input v-model.trim="ruleForm.static"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="充值事件：" prop="topuplist" style="width:90%;">
            <el-select v-model="ruleForm.topuplist" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in optionstopuplist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
        </el-col>
        </el-row>


          <el-form-item>
            <el-button @click="data.children_page = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  <script lang="ts" setup>
import UploadImg from "./Upload/Img.vue";
    import {
      softwaredata,
    } from '../../../api/index';
    import {
      ElMessage,
      ElTree
    } from "element-plus";
    // import type { FormInstance } from 'element-plus' 
    import {
      ref,
      reactive,
      nextTick,
      // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
      // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
      // defineExpose//暴露出去;<script setup>直接可用
    } from 'vue';
import { log } from "console";
// 服务状态
const optionsfwlist = [
  {
    value: '1',
    label: '免费开放中',
  },
  {
    value: '2',
    label: '收费运营中',
  },
  {
    value: '3',
    label: '扣点运营中',
  },
  {
    value: '4',
    label: '已停止运营',
  },
  {
    value: '5',
    label: '软件维护中',
  },
];
// 强制登录
const optionsforcelist = [
  {
    value: '1',
    label: '本机强制',
  },
  {
    value: '2',
    label: '所有强制',
  },
  {
    value: '3',
    label: '禁止强制',
  },
];
// 单机多开
const optionsoveropenlist = [
  {
    value: '1',
    label: '禁止',
  },
  {
    value: '2',
    label: '允许',
  },
];
// 注册模式
const optionsregisterlist = [
  {
    value: '1',
    label: '关闭注册',
  },
  {
    value: '2',
    label: '机器唯一',
  },
  {
    value: '3',
    label: '完全开放',
  },
  {
    value: '4',
    label: '需充值卡',
  },
];
// 绑定模式
const optionsbindinglist = [
  {
    value: '1',
    label: '关闭所有绑定',
  },
  {
    value: '2',
    label: '开启所有绑定',
  },
  {
    value: '3',
    label: '只开机器绑定',
  },
  {
    value: '4',
    label: '只开游号绑定',
  },
  {
    value: '5',
    label: '只开地区绑定',
  },
];
// 限次周期
const optionsperiodlist = [
  {
    value: '1',
    label: '每天解绑',
  },
  {
    value: '2',
    label: '每周解绑',
  },
  {
    value: '3',
    label: '每月解绑',
  },
  {
    value: '4',
    label: '总共解绑',
  },
];
// 更新方式
const optionsupdatemodelist = [
  {
    value: '1',
    label: '用户自行选择',
  },
  {
    value: '2',
    label: '系统强制更新',
  },
];
// 充值事件
const optionstopuplist = [
  {
    value: '1',
    label: '叠加赠送时间',
  },
  {
    value: '2',
    label: '清除赠送时间',
  },
];
    const test1 = ref('')
const test2 = ref('')
// const test1=(v:any)=>{
//   console.log("接收到子组件的值",v)
//   alert(2);
// }
    const ruleFormRef = ref();//表单ref
    //获取tree选中的值
    const treeRef = ref < InstanceType < typeof ElTree >> ();
    const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)
 
    //数据双向绑定;复杂类型数据=>响应式数据
    const data = reactive({
      titleName: '',
      checkAll: false,
      children_page: false,
      isAdd: false,
      systems: [{
        name: '开发1部',
        id: 'water'
      }, {
        name: '市场部',
        id: 'pollution'
      }],
      nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
      treeDatas: [], //树-总数据
      id: '',
    });
    //ts类型断言
    //定义类型
    interface User {
      id:string;
      name: string;
      code: string;
		fwlist: string;
		forcelist: string;
		try: string;
		overopenlist: string;
		extend: string;
		use: string;
		registerlist: string;
		registertime: string;
		bindinglist: string;
		bindingtime: string;
		periodlist: string;
		bindinglimit: string;
		updatemodelist: string;
		updateaddress: string;
		version: string;
		bulletin: string;
		static: string;
		topuplist: string;
    };
    const ruleForm = reactive({
    name: '',
		code: '',
		fwlist: '',
		forcelist: '',
		try: '',
		overopenlist: '',
		extend: '',
		use: '',
		registerlist: '',
		registertime: '',
		bindinglist: '',
		bindingtime: '',
		periodlist: '',
		bindinglimit: '',
		updatemodelist: '',
		updateaddress: '',
		version: '',
		bulletin: '',
		static: '',
		topuplist: '',

    });
    const rules = ref({
      name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
      ],
      
    });
    //父调子的子
    const addItemShow = (now_name: string) => {
      data.titleName = '添加角色';
      data.children_page = true;
      data.isAdd = true;
      ruleForm.name = "";
        ruleForm.code = "";
        ruleForm.fwlist = "1";
        ruleForm.forcelist = "1";
        ruleForm.try = "";
        ruleForm.overopenlist = "1";
        ruleForm.extend = "";
        ruleForm.use = "";
        ruleForm.registerlist = "1";
        ruleForm.registertime = "";
        ruleForm.bindinglist = "1";
        ruleForm.bindingtime = "";
        ruleForm.periodlist = "1";
        ruleForm.bindinglimit = "";
        ruleForm.updatemodelist = "1";
        ruleForm.updateaddress = "";
        ruleForm.version = "";
        ruleForm.bulletin = "";
        ruleForm.static = "";
        ruleForm.topuplist = "1";
        console.log(ruleForm);
        
      nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      })
    };
    //父调子的子
    const addItemShow2 = (row: User, now_name: string) => {
      data.titleName = '编辑角色';
      data.children_page = true;
      data.isAdd = false;
      nextTick(() => {
        ruleFormRef.value.resetFields();//重置表单
        ruleForm.name = row.name;
        ruleForm.code = row.code;
        ruleForm.fwlist = row.fwlist;
        ruleForm.forcelist = row.forcelist;
        ruleForm.try = row.try;
        ruleForm.overopenlist = row.overopenlist;
        ruleForm.extend = row.extend;
        ruleForm.use = row.use;
        ruleForm.registerlist = row.registerlist;
        ruleForm.registertime = row.registertime;
        ruleForm.bindinglist = row.bindinglist;
        ruleForm.bindingtime = row.bindingtime;
        ruleForm.periodlist = row.periodlist;
        ruleForm.bindinglimit = row.bindinglimit;
        ruleForm.updatemodelist = row.updatemodelist;
        ruleForm.updateaddress = row.updateaddress;
        ruleForm.version = row.version;
        ruleForm.bulletin = row.bulletin;
        ruleForm.static = row.static;
        ruleForm.topuplist = row.topuplist;
        data.id = row.id;

      })
    };

  
    //添加/修改   : FormInstance | undefined
    const onSubmit = async (formEl:any) => {
      if (!formEl) return
      formEl.validate((valid:any) => {
        if (valid) {
          if (data.isAdd) { 
            addRoles();
          } else {
            changeRoles();
          }
        } else {
          return false;
        }
      });
    };




 



// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
          // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
    const addRoles = () => { 
      console.log(499);
      let params = {
        action: 'apiadd',
        name: ruleForm.name,
        code: ruleForm.code,
        fwlist: ruleForm.fwlist,
        forcelist: ruleForm.forcelist,
        try: ruleForm.try,
        overopenlist: ruleForm.overopenlist,
        extend: ruleForm.extend,
        use: ruleForm.use,
        registerlist: ruleForm.registerlist,
        registertime: ruleForm.registertime,
        bindinglist: ruleForm.bindinglist,
        bindingtime: ruleForm.bindingtime,
        periodlist: ruleForm.periodlist,
        bindinglimit: ruleForm.bindinglimit,
        updatemodelist: ruleForm.updatemodelist,
        updateaddress: ruleForm.updateaddress,
        version: ruleForm.version,
        bulletin: ruleForm.bulletin,
        static: ruleForm.static,
        topuplist: ruleForm.topuplist,
      }
      // 新增
      softwaredata(params).then(res => {
        console.log(525);
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    //修改接口
    const changeRoles = () => {
      
      let params = {
        action: 'apiedit',
        id: data.id,
        name: ruleForm.name,
        code: ruleForm.code,
        fwlist: ruleForm.fwlist,
        forcelist:ruleForm.forcelist,
        try: ruleForm.try,
        overopenlist: ruleForm.overopenlist,
        extend: ruleForm.extend,
        use: ruleForm.use,
        registerlist: ruleForm.registerlist,
        registertime: ruleForm.registertime,
        bindinglist: ruleForm.bindinglist,
        bindingtime: ruleForm.bindingtime,
        periodlist: ruleForm.periodlist,
        bindinglimit: ruleForm.bindinglimit,
        updatemodelist: ruleForm.updatemodelist,
        updateaddress: ruleForm.updateaddress,
        version: ruleForm.version,
        bulletin: ruleForm.bulletin,
        static: ruleForm.static,
        topuplist: ruleForm.topuplist,
      }
// 修改
      softwaredata(params).then(res => {
        console.log(296);
        console.log(res)
        console.log(res.status)
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    defineExpose({
      addItemShow,
      addItemShow2
    }) //将子组件方法暴露出来，让父组件调用
  </script>
  <style scoped>
    .jurisdiction-border {
      width: 500px;
      height: 300px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: auto;
    }
   
    .jurisdiction-border::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
    }
   
    .jurisdiction-border::-webkit-scrollbar-thumb {
      background-color: rgb(193, 193, 193);
      border-radius: 3px;
    }
   
    .tree-name-leave {
      margin-leave: 5px;
    }
  </style>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>